﻿@page "/tree-grid/resizing"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor
@*Hidden:Lines*@
@using BlazorDemos
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p>This sample demonstrates the Tree Grid column resizing feature. Click and drag at the right corner of each column header to resize the column.</p>
</SampleDescription>
<ActionDescription>
    <p>The Tree Grid columns can be resized by clicking and dragging at the right edge of columns header. Set the <code>AllowResizing</code> property as true to enable column resizing behavior in Tree Grid. You can also prevent the resize of the particular column by setting <code>TreeGridColumn->AllowResizing</code> as false in columns definition.</p>
    <p>In this demo, the Tree Grid is populated with its minimum default settings.</p>
    <p>More information on the Resizing can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/columns/#column-resizing'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
              <SfTreeGrid DataSource="@TreeGridData" IdMapping="TaskID" ParentIdMapping="ParentID" Height="315" TreeColumnIndex="1" AllowPaging="true" AllowResizing="true">
                <TreeGridPageSettings PageSize="2"></TreeGridPageSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="100" MinWidth="8" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="150" MinWidth="120"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" MinWidth="8" Type=ColumnType.Date Width="135" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="EndDate" HeaderText=" End Date" Format="d" MinWidth="8" Type=ColumnType.Date Width="135" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="125" MinWidth="8" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="133" MinWidth="8" ></TreeGridColumn>
                    <TreeGridColumn Field="Priority" HeaderText="Priority" Width="135" MinWidth="8" ></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@code{

    public List<SelfReferenceData> TreeGridData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeGridData = SelfReferenceData.GetTree().ToList();
    }
}
